<template>
  <el-dialog
    title="数据导入"
    :visible="importDataDiaglog"
    @close="handleClose"
  >
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :before-remove="beforeRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :on-success="uploadSuccess"
    >
      <label style="font-weight: normal;" class="label_box">标题：</label>
      <div class="btn_box">
        <el-button size="small" type="primary" class="el-icon-upload2" style="width:221px;background:#5f84ff">上传文件</el-button>
        <div slot="tip" class="el-upload__tip">支持扩展名：xls、xlsx，文件不得大于1M</div>
      </div>
    </el-upload>
    <span slot="footer" class="dialog-footer">
      <el-button style="background-color: #fbf4f0!important;color: #655b56!important;border:0;width:80px;height:36px;padding:0" @click="handleClose">取 消</el-button>
      <el-button type="primary" style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important;border:0;width:80px;height:36px;padding:0;margin:0 0 0 34px" @click="importData">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { importDataInfo } from '@/api/goods'
export default {
  name: 'DiagLog',
  props: {
    importDataDiaglog: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      query: {
        fileName: null
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('handleClose', false)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制只能选择 1 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadSuccess(response, file, fileList) {
      console.log(file)
      this.query.fileName = file.name
    },
    async importData() {
      console.log(1)
      if (this.query.fileName) {
        const res = await importDataInfo(this.query)
        console.log(res)
      } else {
        this.$message.warning('请上传文件')
      }
    }
  }

}
</script>

<style scoped lang='less'>
/deep/.el-dialog{
    border-radius: 10px;
    width: 483px;
    .el-dialog__header{
        .el-dialog__title{
            font-weight:700;
        }
    }
    .el-dialog__body{
    padding: 20px 20px 30px;
     text-align: center;
     position: relative;
    .label_box{
      position: absolute;
      top: 29%;
      left: 15%;
    }
    // .btn_box{

    // }
    }
    .el-dialog__footer{
      text-align: center;
    }
}

</style>
